<template>
  <div class="box">
      <el-card class="chartCard">
        <div ref="box" class="PieChart"></div>
      </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { pieOption } from './options'
import { articleApi } from '../../apis/article'
const useArticleApi = articleApi()
export default {
  data () {
    return {
      myChart: '',
      pData: []
    }
  },
  methods: {
    async getTypeCount () {
      await useArticleApi.getTypeCount().then(res => {
        if (res && res.code === 200) {
          this.pData = res.data
          this.init()
        }
      })
    },
    init () {
      const options = { ...pieOption }
      options.series[0].data = this.pData
      this.myChart.setOption(options)
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.box)
    this.getTypeCount()
    this.$bus.$on('changeWidth', () => { this.myChart.resize() })
  }
}
</script>

<style scope lang="less">
.chartCard{
    width: 100%;
    height: 100%;
}
.PieChart{
    width: 400px;
    height: 400px;
}
</style>
